<template>
  <div class="add-friend-main">
    <div class="add-friend-header">
      <div class="head-title">
        主动加好友
        <span class="example-text">示例</span>
        <div class="example-modal">
          <img class="example-cover" src="@/assets/images/pic_add_friend_example.png"/>
        </div>
      </div>
      <img class="divider" src="@/assets/images/divider.png"/>
      <changeEnterprise v-model="enterpriseValue"></changeEnterprise>
    </div>
    <div class="add-friend-card">
      <div class="status-box">
        <img class="status-cover" src="@/assets/images/add_firend_box_status.gif" v-if="taskStatus === 1"/>
        <img class="status-cover" src="@/assets/images/pause.png" v-else/>
        <div class="status-wrap">
          <div class="status-title runing" v-if="taskStatus === 1">任务执行中</div>
          <div class="status-title pause" v-else>任务暂停中</div>
          <div class="status-context">
            每天09:00-18:00每个号隔20 ~ 30分钟打招呼
            <a @click="getSetFriendModal">设置</a>
            <div class="cloumn-line"></div>
            通过后自动运营
            <a @click="getAuto">设置</a>
            <div class="cloumn-line"></div>
            企微号自动管理
            <a @click="getAutoSettingDialog()">设置</a>
          </div>
        </div>
        <button class="status-button" @click="onTiggerTask()" v-hasPermi="['add-friend:stopTask']">
          <i class="el-icon-switch-button"></i>
          <span>{{ taskStatus == 1 ? '暂停任务' : '开始任务' }}</span>
        </button>
        <a class="status-button" @click="onNavigationTo('/hook/add-friend/task')" v-hasPermi="['add-friend:taskList']">
          <i class="el-icon-date"></i>
          <span>任务中心</span>
        </a>
        <a class="status-button" @click="onNavigationTo('/hook/add-friend/statistics')" v-hasPermi="['add-friend:data']">
          <i class="el-icon-data-analysis"></i>
          <span>数据统计</span>
        </a>
      </div>
      <div class="page-wrap">
        <div class="group-box">
          <div class="group-header">
            <div class="title">任务分组</div>
            <span class="count">2/2</span>
          </div>
          <div class="box-list">
            <div class="list-head">
              <div class="create-button" @click="showCreateGroupDialog(true)">
                <i class="el-icon-plus"></i>
                <span>添加分组</span>
              </div>
            </div>
            <div class="box-item active">
              <div class="box-big">
                <i class="el-icon-folder"></i>
                <span>未分组</span>
              </div>
              <el-dropdown>
                <i class="el-icon-more"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="getEditName">重命令</el-dropdown-item>
                  <el-dropdown-item @click.native="handleNumberDelete">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="box-item">
              <div class="box-big">
                <i class="el-icon-folder"></i>
                <span>第一组</span>
              </div>
              <i class="el-icon-more"></i>
            </div>
          </div>
        </div>
        <div class="main-box">
          <div class="table-header">
            <div class="option-button">
              <el-dropdown>
                <el-button size="small" type="primary" v-hasPermi="['add-friend:add']">
                  <i class="el-icon-plus"></i>
                  手机号
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in dropdownMenu" :key="index" @click.native="getShowDialog(item.type)">{{ item.name }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <div class="export-button">
                <el-button size="small">导出</el-button>
              </div>
            </div>
            <div class="option-search">
              <el-radio-group v-model="queryParams.status" size="small">
                <el-radio-button :label="1">全部</el-radio-button>
                <el-radio-button :label="2">未执行（1）</el-radio-button>
                <el-radio-button :label="3">已完成</el-radio-button>
                <el-radio-button :label="4">已失败</el-radio-button>
              </el-radio-group>
              <div style="margin-left: 8px;">
                <el-input class="search-input" v-model="queryParams.phonenumber" size="small" placeholder="搜手机号" suffix-icon="el-icon-search"/>
              </div>
              <el-button class="more-tag" size="small" @click="onHandleSearchDrawerShow(true)">
                <svg-icon icon-class="hookscreen"/>
              </el-button>
            </div>
          </div>
          <div class="table-wrap">
            <el-table
              ref="hookTable"
              :data="dataSource"
              header-cell-class-name="table-header-class"
              header-row-class-name="table-header-row-class"
              row-class-name="table-row-class"
              @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="70">
              </el-table-column>
              <el-table-column
                property="mobile"
                label="客户手机号">
                <template slot-scope="scope">
                  <div class="title">18166041621
                    <el-tooltip placement="top">
                      <div slot="content">
                        <div class="label-list">
                          <span class="label-tag active">可爱爱</span>
                          <span class="label-tag">恶心心</span>
                          <span class="label-tag">可呜呜</span>
                        </div>
                      </div>
                      <svg-icon icon-class="tags"></svg-icon>
                    </el-tooltip>
                  </div>
                  <div class="creat-time">2024-05-13 10:42:32入库</div>
                </template>
              </el-table-column>
              <el-table-column
                property="name"
                label="好友状态">
                <template slot-scope="scope">
                  <div class="status"><i class="el-icon-alarm-clock"></i>待分配</div>
                </template>
              </el-table-column>
              <el-table-column
                property="address"
                label="客户微信号">
              </el-table-column>
              <el-table-column
                property="address"
                label="打招呼微信号">
                <template slot-scope="scope">
                  <div class="account">待分配企微号</div>
                </template>
              </el-table-column>
              <el-table-column
                property="option"
                label="操作">
                <template slot-scope="scope">
                  <div class="operate-big">
                    <div class="account">已加 0 次</div>
                    <el-dropdown trigger="click">
                      <el-button round size="small" style="width: 24px;
    height: 24px;
    padding: 0;
    font-size: 10px;
    border-radius: 50%;">
                        <i class="el-icon-more"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="editTags('enterprise')">修改企微标签</el-dropdown-item>
                        <el-dropdown-item @click.native="editTags('smart')">修改智能标签</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>

                </template>
              </el-table-column>
            </el-table>

          </div>
          <div class="table-footer">
            <div class="check-text">已选：
              <span style="color: rgb(48, 112, 255);">0</span>
              <a>全选</a>
            </div>
            <div style="margin-left: 8px;">
              <el-button size="small" @click="editTags('allEnterprise')" :disabled="isDisable" v-hasPermi="['add-friend:editClabel']">修改企微标签</el-button>
              <el-button size="small" @click="editTags('allSmart')" :disabled="isDisable" v-hasPermi="['add-friend:editSlabel']">修改智能标签</el-button>
              <el-button size="small" v-hasPermi="['add-friend:reAdd']" :disabled="isDisable">重新添加</el-button>
              <el-button size="small" v-hasPermi="['add-friend:del']" :disabled="isDisable">删除</el-button>
            </div>
          </div>
        </div>
        <div class="setting-box">
          <div class="setting-header">
            <div class="title">打招呼</div>
            <a @click="onNavigationTo('/hook/add-friend/setting')" v-hasPermi="['add-friend:speekSet']">
              <i class="el-icon-chat-line-round"></i>
              <span style="margin-left: 6px;">话术设置（1）</span>
            </a>
          </div>
          <div class="list-box">
            <div class="list-header">
              <div class="search-row">
                <el-input class="search-input" size="small" placeholder="搜索企业号" suffix-icon="el-icon-search"/>
                <el-popover
                  placement="top-start"
                  width="280"
                  trigger="hover"
                >
                  <div class="content">
                    <div class="content-title">登录状态</div>
                    <el-radio-group v-model="radio">
                      <el-radio :label="1">全部</el-radio>
                      <el-radio :label="2">在线</el-radio>
                      <el-radio :label="3">离线</el-radio>
                    </el-radio-group>
                    <div class="content-title" style="margin-top: 20px">启用状态</div>
                    <el-radio-group v-model="radio">
                      <el-radio :label="1">全部</el-radio>
                      <el-radio :label="2">启用</el-radio>
                      <el-radio :label="3">停用</el-radio>
                    </el-radio-group>
                  </div>
                  <el-button slot="reference" class="more-tag" size="small">
                    <svg-icon icon-class="hookscreen"/>
                  </el-button>
                </el-popover>

              </div>
              <div class="search-row2">
                <span class="title">企微号<span>（5）</span></span>
                <el-button size="small" class="add-button" @click="onHanleUserSelectDialogShow(true)">
                  <i class="el-icon-plus"></i>
                  打招呼企微号
                </el-button>
              </div>
            </div>
            <el-checkbox-group v-model="checkList" class="sayHello">
              <el-checkbox label="复选框 A">
                <div class="list-account-item">
                  <img class="account-cover" src="@/assets/images/profile.jpg"/>
                  <div class="account-info">
                    <div class="account-name">肖美丽</div>
                    <div class="desc-context">
                      <div>今日已打招呼：<span>0/40</span></div>
                      <!-- <span style="color: rgb(251, 88, 78);">已停用</span> -->
                    </div>
                  </div>
                  <el-dropdown trigger="click">
                    <el-button class="more-button" size="small">
                      <i class="el-icon-more"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="onHandleWatchDialogShow(true)">查看日志</el-dropdown-item>
                      <el-dropdown-item>停用</el-dropdown-item>
                      <el-dropdown-item @click.native="talkeDialogVisible = true">每日打招呼上限</el-dropdown-item>
                      <el-dropdown-item @click.native="changeGroupVisible = true">更换分组</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-checkbox>
            </el-checkbox-group>

          </div>
          <div class="list-footer">
            <div class="check-text">已选：
              <span style="color: rgb(48, 112, 255);">0</span>
              <a>全选本页</a>
            </div>
            <div style="flex: 1 1 0%;"/>
            <div style="margin-left: 8px;">
              <el-dropdown trigger="click">
                <el-button class="option-button" size="small" v-hasPermi="['add-friend:del']">批量操作</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>启用</el-dropdown-item>
                  <el-dropdown-item>停用</el-dropdown-item>
                  <el-dropdown-item @click.native="onHandleTalkeDialogVisible(true)">每日打招呼上限</el-dropdown-item>
                  <el-dropdown-item @click.native="changeGroupVisible = true">更换分组</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    设置打招呼间隔时间-->
    <SetFriendDialog v-if="showSetFriendDialog" :visableIf.sync="showSetFriendDialog"/>
<!--    设置自动打招呼时间-->
    <AutoSettingDialog v-if="showAutoSettingDialog" :visableIf.sync="showAutoSettingDialog"/>
    <!--    添加分组-->
    <CreateGroupDialog :visible="createGroupVisible" @onClose="showCreateGroupDialog(false)"/>
<!--    更多查询条件-->
    <SearchMoreDrawer :drawer="searchDrawer" @onClose="onHandleSearchDrawerShow(false)"/>
    <SelectUserDialog :visible="selectDialog" @onClose="onHanleUserSelectDialogShow(false)"/>
    <WatchLogsDialog :visible="watchDialog" @onClose="onHandleWatchDialogShow(false)"/>
    <SetTalkeDialog :visible="talkeDialogVisible" @onClose="onHandleTalkeDialogVisible(false)"/>
    <ChangeGroupDialog :visible="changeGroupVisible" @onClose="onHandleChangeGroupVisible(false)"/>
    <!--    导入手机号-->
    <exportPhone v-if="showExportPhone" :visableIf.sync="showExportPhone"></exportPhone>
    <!--    手动输入手机号码-->
    <manualInputPhone v-if="showManualInputPhone" :visableIf.sync="showManualInputPhone"></manualInputPhone>
    <yizhiExport v-if="showYizhiExport" :visableIf.sync="showYizhiExport"></yizhiExport>
    <editName v-if="showEditName" :visableIf.sync="showEditName"></editName>
    <!--    选择企微标签或者智能标签-->
    <selectAllTags v-if="showSelectAllTags" :visableIf.sync="showSelectAllTags" :dataList="dataList2" :chooseValue="chooseValue" :type="`smart`" :isShow="true" @upDataList="upDataList"></selectAllTags>
  </div>
</template>
<script>
import SetFriendDialog from './components/SetFriendDialog.vue';
import AutoSettingDialog from './components/AutoSettingDialog.vue';
import CreateGroupDialog from './components/CreateGroupDialog.vue';
import SearchMoreDrawer from './components/SearchMoreDrawer.vue';
import SelectUserDialog from './components/SelectUserDialog.vue';
import WatchLogsDialog from './components/WatchLogsDialog.vue';
import SetTalkeDialog from './components/SetTalkeDialog.vue';
import ChangeGroupDialog from './components/ChangeGroupDialog';
import exportPhone from './components/exportPhone';
import manualInputPhone from './components/manualInputPhone';
import yizhiExport from './components/yizhiExport';
import editName from './components/editName';
import selectAllTags from "@/views/hook/addFriend/components/selectAllTags.vue";
import {mapGetters} from 'vuex';
import {reqFriendList} from '@/api/addFriend/index'

export default {
  components: {
    selectAllTags,
    SetFriendDialog,
    AutoSettingDialog,
    CreateGroupDialog,
    SearchMoreDrawer,
    SelectUserDialog,
    WatchLogsDialog,
    SetTalkeDialog,
    ChangeGroupDialog,
    exportPhone,
    manualInputPhone,
    yizhiExport,
    editName,
    'changeEnterprise': () => import('@/views/components/changeEnterprise.vue'),
  },
  computed: {
    // 使用对象展开运算符将此getter映射到局部计算属性
    ...mapGetters([
      'enterpriseId' // 假设这是你想要监听的getter的名字
    ]),
  },
  data() {
    return {
      showAutoSettingDialog:false,//自动设置
      showSetFriendDialog:false,//设置朋友打招呼
      checkList:[],//打招呼的数组
      enterpriseValue: 1,//获取企业的值
      enterpriseList: [
        {value: 1, label: '锐行'},
        {value: 2, label: '志新'},
      ],
      actived: 0,
      showEditName: false,
      setFriendVisible: false,
      autoSettingVisible: false,
      createGroupVisible: false,
      searchDrawer: false,
      selectDialog: false,
      watchDialog: false,
      talkeDialogVisible: false,
      changeGroupVisible: false,
      showExportPhone: false,//导入手机号显隐
      showManualInputPhone: false,//手动输入手机号码
      showYizhiExport: false,
      showSelectAllTags: false,
      isDisable: true,
      taskStatus: 1,
      queryParams: {
        pageSize: 10,
        pageNum: 1,

      },
      status: 1,
      radio: null,
      cities: [{
        value: '0',
        label: '志新'
      }, {
        value: '1',
        label: '锐行'
      }],
      value: '',
      multipleSelection: [],//多选
      dataList2: [
        {
          field: "week",
          label: "生命周期",
          showChild: true,
          child: [
            {
              field: "we1",
              label: "孕4周",
              dictKey: null,
              dateFormat: null
            },
            {
              field: "we2",
              label: "孕8周",
              dictKey: null,
              dateFormat: null
            },
          ]
        },
      ],
      chooseValue: [],
      dropdownMenu: [
        {type: 'excel', name: 'Excel导入'},
        {type: 'input', name: '手动输入'},
        {type: 'yijie', name: '一知对接导入'},
        {type: 'baiying', name: '百应对接导入'},
        {type: 'aike', name: '艾客对接导入'},
      ],
      drawerPage: 'yijie',
      dataSource: [
        {mobile: '1111',}
      ]
    }
  },
  watch: {
    multipleSelection: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          this.isDisable = false; //是否禁用
        } else {
          this.isDisable = true;
        }
      }
    },
    enterpriseId(val){
      console.log('切换企业----',val);
    },
  },
  methods: {
    getAuto(){
      this.$router.push({
        path:'/hook/add-friend/auto-remark',
        query:{
          corpId:this.enterpriseId
        },
      })
    },
    getList() {
      this.tableDataList = []
      this.loading = true
      reqFriendList(this.queryParams).then(res => {
        this.tableDataList = res.rows;
        this.total = res.total;
        this.loading = false

      })
    },
    handleSelectionChange(val) {
      console.log('多选值', val);
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        })
        console.log('multipleSelection', this.multipleSelection);
      }
    },
    //搜索
    handleQuery() {
      this.queryParams.pageSize = 10;
      this.queryParams.pageNum = 1;
      this.getList()
    },
    //重置表单
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    editTags(type) {
      if (type == 'smart') {
        //智能标签
        this.showSelectAllTags = true;
      } else if (type == 'enterprise') {
        this.showSelectAllTags = true;
        //企微标签
      } else if (type == 'allSmart') {
        //批量操作
      } else if (type == 'allEnterprise') {
        //批量操作
      }
      console.log('showSelectAllTags', this.showSelectAllTags);
    },
    upDataList(code, list) {
      //获取到查询的参数，更新数据
      console.log('获取值然后更新接口', code, list);
      //写接口的逻辑
    },
    handleNumberDelete() {
      // const userIds = row.userId || this.ids;
      // this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      //   return delUser(userIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {
      // });
      this.$msgBox.showMsgBox({
        title: "是否确认删除？",
        content: "该企微号正在执行服务，删除将会使该号从操作中释放，导致部分功能无法正常使用，请谨慎选择。*如该号已加入在线聊天，成功删除后，聊天记录会被一并删除，重新登录后无法恢复。",
      })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getShowDialog(type) {
      if (type == 'excel') {
        //Excel导入
        this.showExportPhone = true;
      } else if (type == 'input') {
        //手动输入
        this.showManualInputPhone = true;
      } else if (type == 'yijie') {
        //一知对接导入
        this.showYizhiExport = true;
        this.drawerPage = type;

      } else if (type == 'baiying') {
        //调用同一个组件
        this.showYizhiExport = true;
        this.drawerPage = type;
      } else if (type == 'aike') {
        //调用同一个组件
        this.showYizhiExport = true;
        this.drawerPage = type;
      }
    },
    getEditName() {
      this.showEditName = true;
    },
    getSetFriendModal() {
      this.showSetFriendDialog = true;
    },
    getAutoSettingDialog() {
      this.showAutoSettingDialog = true
    },
    showCreateGroupDialog(isShow) {
      this.createGroupVisible = isShow
    },
    onHandleSearchDrawerShow(isShow) {
      this.searchDrawer = isShow
    },
    onHanleUserSelectDialogShow(isShow) {
      this.selectDialog = isShow
    },
    onHandleWatchDialogShow(isShow) {
      this.watchDialog = isShow
    },
    onHandleTalkeDialogVisible(isShow) {
      this.talkeDialogVisible = isShow
    },
    onHandleChangeGroupVisible(isShow) {
      this.changeGroupVisible = isShows
    },
    onNavigationTo(path) {
      this.$router.push(path)
    },
    onTiggerTask() {
      if (this.taskStatus === 1) {
        this.$confirm('关闭后，本账号的本企业下所有设置了打招呼的企微号将停止主动加好友。', '确定停止主动加好友？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'box-confirm',
          center: true
        }).then(() => {
          this.taskStatus = 0
        })
      } else {
        this.$confirm('开启后，本账号的本企业下所有设置了打招呼的企微号将开启主动加好友。', '确定开启主动加好友？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'box-confirm',
          center: true
        }).then(() => {
          this.taskStatus = 1
        })
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.add-friend-main {
  .add-friend-header {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;

    .head-title {
      font-size: 14px;
      line-height: 22px;

      .example-text {
        color: #2f54eb;
        cursor: pointer;
        margin-left: 8px;;
        font-weight: 400;

        &:hover + .example-modal {
          display: block;
        }
      }

      .example-modal {
        position: fixed;
        left: 0;
        margin-top: 10px;
        display: none;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        background: #FFFFFF;

        .example-cover {
          height: 600px;
        }
      }
    }

    .divider {
      margin: 0 20px;
      width: 1px;
      height: 16px;
    }
  }

  .add-friend-card {
    padding: 12px 12px 0;

    .status-box {
      height: 80px;
      background: linear-gradient(132deg, #fff, #f5f9ff 46%, #fff);
      border: 1px solid #e9e9e9;
      border-bottom: none;
      display: flex;
      align-items: center;
      grid-gap: 8px;
      gap: 8px;
      padding: 0 16px;

      .status-cover {
        width: 48px;
        height: 48px;
      }

      .status-wrap {
        flex: 1 1 0%;

        .status-title {
          font-size: 16px;
          line-height: 22px;
          font-weight: 600;

          &.runing {
            color: #52c41a;
          }

          &.pause {
            color: #faad14;
          }
        }

        .status-context {
          font-size: 14px;
          line-height: 22px;
          display: flex;
          align-items: center;
          color: rgba(0, 0, 0, 0.45);

          a {
            color: #3070ff;
            text-decoration: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
            transition: color .3s;
            margin-left: 8px;
          }

          .cloumn-line {
            position: relative;
            top: -0.06em;
            display: inline-block;
            height: 0.9em;
            margin: 0 8px;
            vertical-align: middle;
            border-top: 0;
            border-left: 1px solid rgba(0, 0, 0, .06);
          }
        }
      }

      .status-button {
        line-height: 1.5715;
        position: relative;
        display: inline-block;
        font-weight: 400;
        white-space: nowrap;
        text-align: center;
        background-image: none;
        box-shadow: unset;
        cursor: pointer;
        transition: all .3s cubic-bezier(.645, .045, .355, 1);
        user-select: none;
        touch-action: manipulation;
        height: 32px;
        padding: 4px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: rgba(0, 0, 0, .65);
        border: 1px solid #e9e9e9;
        background: #fff;

        span {
          margin-left: 8px;
        }
      }
    }

    .page-wrap {
      height: calc(100vh - 200px);
      display: flex;
      align-items: stretch;
      overflow: auto;
      background: #fff;
      border: 1px solid #e9e9e9;

      .group-box {
        width: 240px;
        display: flex;
        flex-direction: column;

        .group-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          grid-gap: 8px;
          gap: 8px;
          height: 48px;
          padding-left: 12px;
          padding-right: 12px;
          border-bottom: 1px solid #e9e9e9;

          .title {
            font-size: 14px;
            line-height: 22px;
            font-weight: 600;
            color: rgba(0, 0, 0, .85);
          }

          .count {
            font-size: 14px;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.45);
          }
        }

        .box-list {
          flex: 1 1;
          overflow-y: auto;
          padding: 0 12px 12px;

          .list-head {
            background: #fff;
            padding: 12px 0 8px;
            position: sticky;
            top: 0;

            .create-button {
              color: rgba(0, 0, 0, .65);
              background: #fff;
              border: 1px dashed #e9e9e9;
              font-size: 14px;
              line-height: 22px;
              height: 32px;
              padding: 4px 15px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;

              span {
                margin-left: 8px;
              }
            }
          }

          .box-item {
            margin-top: 4px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            grid-gap: 8px;
            gap: 8px;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 14px;
            line-height: 22px;
            justify-content: space-between;

            &.active {
              background: #ebf2ff;
              color: #3070ff;
            }

            span {
              margin-left: 8px;
            }

            .el-icon-more {
              font-size: 14px;
            }
          }
        }
      }

      .main-box {
        flex: 1 1;
        overflow: auto;
        border-left: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
        display: flex;
        flex-direction: column;
        background: #F7F7F7;

        .table-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 6px 12px;
          border-bottom: 1px solid #e9e9e9;
          background: #FFFFFF;

          .option-button {
            display: flex;
            align-items: center;

            .export-button {
              margin-left: 10px;
            }
          }

          .option-search {
            display: flex;
            align-items: center;

            .search-input {
              width: 168px;
            }

            .more-tag {
              width: 32px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 8px;
            }
          }
        }

        .table-wrap {
          flex: 1 1;
        }

        .table-footer {
          display: flex;
          align-items: center;
          grid-gap: 8px;
          gap: 8px;
          padding: 10px 12px;
          background: #fff;
          border-top: 1px solid #e9e9e9;
          position: -webkit-sticky;
          position: sticky;
          bottom: 0;

          .check-text {
            font-weight: 400;
            font-size: 14px;
            color: #262626;
            line-height: 44px;

            a {
              margin-left: 8px;
              color: #4371F6;

              span {
                margin-left: 6px;
              }
            }
          }
        }
      }

      .setting-box {
        width: 300px;
        display: flex;
        flex-direction: column;

        .setting-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          grid-gap: 8px;
          gap: 8px;
          height: 48px;
          padding-left: 12px;
          padding-right: 12px;
          border-bottom: 1px solid #e9e9e9;

          .title {
            font-size: 14px;
            line-height: 22px;
            font-weight: 600;
            color: rgba(0, 0, 0, .85);
          }

          a {
            font-size: 14px;
            line-height: 22px;
            color: #3070ff;
            text-decoration: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
            transition: color .3s;
          }
        }

        .list-box {
          flex: 1 1;
          overflow-y: auto;
          padding: 0 12px 12px;

          .list-header {
            background: #fff;
            padding-top: 12px;
            border-bottom: 1px solid #e9e9e9;
            position: sticky;
            top: 0;
            z-index: 11;

            .search-row {
              display: flex;
              align-items: center;
              grid-gap: 8px;
              gap: 8px;
            }

            .search-row2 {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 4px;
              height: 32px;

              .title {
                font-size: 14px;
                line-height: 22px;
                font-weight: 400;
                color: #262626;

                span {
                  color: #8C8C8C;
                }
              }

              .add-button {
                height: 24px;
                padding: 0.8px 7px;
                font-size: 13px;
                border-radius: 4px;
                color: #3070ff;
                border-color: #3070ff;
                text-shadow: none;
              }
            }
          }

          .list-account-item {
            display: flex;
            align-items: center;
            grid-gap: 8px;
            gap: 8px;
            overflow: hidden;
            margin: 10px 0;
            height: 64px;

            .account-cover {
              width: 40px;
              height: 40px;
              border-radius: 4px;
            }

            .account-info {
              flex: 1 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              .account-name {
                font-size: 14px;
                color: #222333;
              }

              .desc-context {
                font-size: 12px;
                color: #888999;
                display: flex;
                align-items: center;
                justify-content: space-between;
              }
            }

            .more-button {
              width: 24px;
              height: 24px;
              padding: 0;
              font-size: 10px;
              border-radius: 50%;
            }
          }
        }

        .list-footer {
          display: flex;
          align-items: center;
          grid-gap: 8px;
          gap: 8px;
          padding: 10px 12px;
          background: #fff;
          border-top: 1px solid #e9e9e9;
          position: sticky;
          bottom: 0;

          .check-text {
            font-weight: 400;
            font-size: 14px;
            color: #262626;
            line-height: 44px;

            a {
              margin-left: 8px;
              color: #4371F6;

              span {
                margin-left: 6px;
              }
            }
          }

          .option-button {
            color: #3070ff;
            border-color: #3070ff;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.add-friend-header .el-input--medium .el-input__inner {
  height: 28px;
  line-height: 28px;
  margin: 0;
  border-radius: 4px;
}

.add-friend-header .el-input__inner {
  border: 1px solid #e9e9e9;
  background: #eff3ff !important;
  border-radius: 4px;
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
  color: rgba(0, 0, 0, .65);
  min-width: 200px;
  font-size: 14px;
  font-variant: tabular-nums;
  font-weight: 400;
  white-space: nowrap;
  line-height: 26px;
}

.add-friend-header .el-select .el-input .el-select__caret {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-scrollbar .select-option-item {
  height: 34px;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-scrollbar .select-option-item:hover .icon-close {
  display: block;
}

.el-scrollbar .select-option-item .icon-close {
  display: none;
}

.el-scrollbar .other-option {
  padding: 0 8px;
  color: #2f54eb;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e9e9e9;
}

.el-scrollbar .other-option > .link {
  font-size: 14px;
}

.table-wrap .table-header-class {
  background-color: #f7f7f7;
  font-weight: 400;
  font-size: 14px;
  color: #888888;
  padding: 9px 13px;
}

.table-wrap .table-header-row-class th {
  border-bottom: 0px !important;
}

.table-wrap .el-table::before {
  height: 0;
}

.table-wrap .table-row-class td {
  border-bottom: 0px !important;
}

.table-wrap .table-row-class {
  height: 64px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #E9E9E9;
}

.table-wrap .el-table__empty-block {
  height: 250px;
  background-image: url("../../../assets/images/ic_table_empty.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 47px;
  padding-top: 25px;
  padding-bottom: 70px;
  background-color: #f7f7f7;
  border: none;

  span {
    position: relative;
    top: 60px;
    font-size: 14px;
    color: #D9D9D9;
  }
}

.box-confirm .el-message-box__title {
  justify-content: flex-start;
  color: rgba(0, 0, 0, .85);
  font-weight: 500;
  font-size: 16px;
}

.box-confirm .el-message-box__message {
  text-align: left;
}

.box-confirm .el-message-box__btns {
  text-align: right;

}

.label-list {
  display: flex;
  flex-wrap: wrap;

  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  i {
    cursor: pointer;

  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #fafafa;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;
    color: #000;

  }
}

.operate-big {
  display: flex;

}

.content {
  .content-title {
    margin-bottom: 10px;
  }
}

.title {
  color: rgba(0, 0, 0, .65);
  font-size: 14px;
}

.creat-time {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.status {
  color: rgb(255, 130, 67);
}
.sayHello {
  display: flex;
  flex-direction: column;
  .el-checkbox {
    flex: 1;
    display: flex;
    align-items: center;
    ::v-deep .el-checkbox__label {
      flex:1;
    }
  }
}
</style>
